<template>
  <div class="xtx-goods-page">
    <div class="container">
      <!-- 面包屑 -->
      <XtxBread separator="/">
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem to="/">
          /
          {{
            goodsData.categories && goodsData.categories[0].name
          }}</XtxBreadItem
        >
        <XtxBreadItem to="/">
          /
          {{
            goodsData.categories && goodsData.categories[1].name
          }}</XtxBreadItem
        >
        <XtxBreadItem to="/"> / {{ goodsData.name }}</XtxBreadItem>
      </XtxBread>
      <!-- 商品信息 -->
      <div class="goods-info">
        <!-- 新增结构 -->
        <!-- 图片预览区 -->
        <div class="media">
          <HomeImage :picture="goodsData.mainPictures" />
          <GoodsSales />
        </div>
        <!-- 商品信息区 -->
        <div class="spec">
          <GoodsName />
          <!-- sku -->
          <Sku :goods="goodsData" @change="getSku" />
          <!-- 商品数量 -->
          <NumBox v-model="buyNum" />
          <button
            style="
              border: none;
              width: 100px;
              height: 50px;
              backgroundcolor: skyblue;
            "
            @click="addCart"
          >
            加入购物车
          </button>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="goods-footer">
        <div class="goods-article">
          <div class="goods-tabs">
            <!-- 详情图片列表 -->
            <img
              v-imglazy="img"
              v-for="(img, i) in goodsData.details?.pictures"
              :key="i"
            />
          </div>
        </div>
        <div class="goods-aside"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HomeImage from './components/home-image.vue'
import GoodsSales from './components/goods-sales.vue'
import GoodsName from './components/goods-name.vue'
import NumBox from '@/components/NumBox/index.vue'
import Sku from '@/components/Sku/index.vue'
import { goodsDetail } from '@/api/goods.js'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ref, provide } from 'vue'
const route = useRoute()
const store = useStore()
const goodsData = ref({})
provide('goodsDetail', goodsData)
const getData = async () => {
  try {
    const res = await goodsDetail(route.params.id)
    goodsData.value = res
  } catch (err) {
    console.log(err.response)
  }
}
getData()

// 加入购物车
const goodsInfo = ref({})
const addCart = async () => {
  if (!goodsInfo.value.skuId) {
    alert('请选择商品信息')
    return
  }
  if (goodsData.value.inventory === 0) {
    alert('商品卖完了')
    return
  }
  const data = {
    id: goodsData.value.id,
    name: goodsData.value.name,
    picture: goodsData.value.mainPictures[0],
    skuId: goodsInfo.value.skuId,
    price: goodsData.value.oldPrice,
    nowPrice: goodsData.value.price,
    attrsText: goodsData.value.specsText,
    stock: goodsData.value.inventory,
    selected: true,
    isEffective: true,
    count: buyNum.value
  }
  console.log(data)
  await store.dispatch('cart/asyncSetCartList', data)
}

// 给sku传的方法
const getSku = (sku) => {
  console.log(sku)
  if (sku.skuId) {
    goodsData.value.price = sku.price
    goodsData.value.oldPrice = sku.oldPrice
    goodsData.value.inventory = sku.inventory
    goodsInfo.value = sku
  } else {
    goodsInfo.value = {}
  }
}

const buyNum = ref(1)
</script>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  // 新增样式
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
    background: #fff;
  }
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
  img {
    width: 100%;
  }
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}
</style>
